<template>
  <div class="breadMenuX">
    <el-menu :ellipsis="false" mode="horizontal" :default-active="props.active"
             class="menuBox" :menu-trigger="trigger" @open="openFn" @close="closeFn">
      <el-sub-menu index="2">
        <template #title>
          <div class="icon titleIcon">
            <slot name="icon" :data="props.data">
              <icon-x v-if="props.data.icon" :type="props.data[props.props.icon]"/>
            </slot>
          </div>
          <div class="title">
            <slot name="title" :data="props.data">
              <span @click="clickTitle">{{ props.data[props.props.title] }}</span>
            </slot>
          </div>
        </template>
        <menu-x-item-one :props="props.props" :data="props.data.children" :click-fn="props.clickFn">
          <template #title="{data}">
            <slot name="title" :data="data"/>
          </template>
          <template #icon="{data}">
            <slot name="icon" :data="data"/>
          </template>
        </menu-x-item-one>
      </el-sub-menu>
    </el-menu>
  </div>
</template>

<script setup>
import {ref} from 'vue'
import IconX from "../xhykIcon.vue";
import menuXItemOne from '../xhykMenu/xhykMenuItem.vue'
import { ElSubMenu,ElMenu } from 'element-plus'

const props = defineProps({
  data: {
    type: Object,
    default: {}
  },
  // 菜单对应属性
  props: {
    type: Object,
    default: {
      index: 'id', // 唯一标识
      title: 'name', // 菜单title
      icon: '', // 图标
      children: 'children' // 子菜单字段
    }
  },
  // 点击了子菜单项的回调事件
  clickFn: {
    type: Function,
    default: function (item) {
      // console.log(item)
    }
  },
  // 当前活跃
  active: {
    type: String,
    default: ''
  },
})

// 修改打开方式
const trigger = ref('click')
const openFn = () => {
  trigger.value = 'hover'
}

const closeFn = () => {
  trigger.value = 'click'
}

const clickTitle = () => {
  trigger.value = 'click'
}

</script>

<style scoped lang='scss'>
.breadMenuX {
  display: inline-block;
  background-color: transparent;
  .menuBox {
    width: 100%;
    border-bottom: none !important;
    background-color: transparent !important;
    height: 20px;
    overflow: hidden;
  }
}

:deep(.menuBox) {
  .el-sub-menu__title {
    padding: 0px 10px;
    padding-right: 20px;
    border-bottom: none !important;
    color: #606266 !important;
    height: 100% !important;
    &:hover {
      background-color: transparent !important;
      font-weight: normal;
    }

    .el-icon {
      right: 6px;
    }
  }
}

.titleIcon {
  height: 100%;
  display: flex;
  align-items: center;
  width: 16px;
}
</style>